<template>
  <div class="layout-header">
    <div class="content">
      <el-menu
        mode="horizontal"
        @select="handleSelect"
        :default-active="$route.path"
        :router="true"
      >
        <el-menu-item class="logo" index="0" route="/home">
          <img class="logoimg" src="@/assets/组 6.png" alt="logo" />
        </el-menu-item>
        <el-menu-item
          :key="key"
          v-for="(item,key) in leftNavItems"
          :index="item.index"
          :route="item.key"
          :class="{ active: key == IsIndex }"
          @click="change(key)"
        >{{item.name}}</el-menu-item>
        <el-menu-item>
          <el-button class="btn" index="/login">登录</el-button>
        </el-menu-item>
        <el-submenu
          class="right-item"
          v-if="Object.keys(rightNavItems).length === 0?false:true"
          index="10"
        >
          <template slot="title">
            <i class="el-icon-s-fold" style="font-size:28px;color:#2d2d2d;"></i>
          </template>
        <el-menu-item
          :key="key"
          v-for="(item,key) in rightNavItems"
          :index="item.index"
          :route="item.activeIndex"
        >{{item.name}}</el-menu-item>
        </el-submenu>
        </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LayoutHeader',
  data () {
    return {
      // 切换颜色标识
      IsIndex: 0,
      navItems: [
        { name: '首页', indexPath: 'home', index: '/' },
        { name: '市场', indexPath: '/market', index: '/market' },
        { name: '铸造', indexPath: '/about', index: '3' },
        { name: '平台介绍', indexPath: '/more', index: '4' },
        { name: '我的', indexPath: '/user', index: '5' }
      ],
      screenWidth: document.body.clientWidth
    }
  },
  mounted () {
    window.onresize = () => {
      this.screenWidth = document.body.clientWidth
    }
  },
  methods: {
    change (key) {
      this.IsIndex = key
    }
  },
  watch: {
    screenWidth (newValue) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = newValue
        this.timer = true
        setTimeout(() => {
          this.timer = false
        }, 400)
      }
    }
  },
  computed: {
    leftNavItems () {
      return this.screenWidth >= 1300 ? this.navItems : {}
    },
    rightNavItems () {
      return this.screenWidth < 1300 ? this.navItems : {}
    }
  }
}
</script>
<style lang="scss" scoped>
.layout-header {
  height: 68px;

  .content{
    width: 100%;
    height: 68px;
    position: fixed;
    z-index: 999999;

    .el-menu{
      width: 100%;
      height: 100%;
      font-size: 14px;
      background: #F8FBFF;
      opacity: 1;

      .el-menu-item{
        font-weight: 400;
        color: #333;
        border-bottom:none;
        opacity: 1;
      }
      .el-menu-item .is-active{
        border-bottom: none;
        font-weight: bold;
        color: #0066ED;
      }

      .el-menu-item:not(.is-disabled):hover {
        background: #F8FBFF;
      }

      .el-menu-item:not(.is-disabled):focus {
        background: #F8FBFF;
      }

      .active {
        font-weight: bold;
        color: #0066ED;
      }
      .logo {
        padding-left: 93px;
        margin-right: 48%;

        img{
          width: 109px;
          height: 41.96px;
          line-height: 19px;
        }
      }

      .btn{
        width: 68px;
        height: 40px;
        color: #fff;
        background: #0066ED;
        border-radius: 12px;
        opacity: 1;
      }
    }
  }
}
.right-item {
  margin-right: 8%;
}
</style>
